{% extends 'master.jinja2' %}
{% block breadcurmb %}
<div class="container">
    <nav>
       <ol class="breadcrumb">
            <li><a href="{{request.route_url('home')}}">首页</a></li>
            <li><a href="{{request.route_url('category',id=category.id)}}">分类列表</a></li>
            <li class="active">{{category.name}}</li>
        </ol>
    </nav>
</div>
{% endblock %}
{% block main %}
<div class="container">
    <div class="row">
        <!--left-->
        <div class="col-md-4 col-sm-4 col-lg-4" id="catergory_body">
           {{ panel('category',category.id) }}

            <div class="panel panel-success">
                <div class="panel-heading">当月热销榜</div>
                <div class="panel-body">
                    {{ panel('item_bill',category.id) }}
                </div>
            </div>
        </div>
        <!--left-->
        <!--right-->
        <div class="col-md-8 col-sm-8 col-lg-8">
           <div class="panel panel-info">
                <div class="panel-heading">{{item.name}}</div>
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <td class="col-lg-5 col-md-5 col-sm-5">
                                <img src="{{request.static_url('myproject:static/uploads/20160801/20160801175305728.jpg')}}" alt="{{item.name}}" class="img-responsive" style="width: 100%"><br>
                            </td>
                            <td>
                                <form class="form-horizontal">
                                    <input type="hidden" value="1" id="gid">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label text-muted">售价：</label>
                                        <div class="col-sm-9">
                                            <label class="text-muted control-label"><strong class="text-danger lead">￥{{item.price}}</strong></label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label text-muted">商品编号：</label>
                                        <div class="col-sm-9">
                                            <label class="text-muted control-label" id="item_id" data-id="{{item.id}}">{{item.id}}</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label text-muted">销售量：</label>
                                        <div class="col-sm-9">
                                            <label class="text-muted control-label"><strong class="text-danger">{{item.num}}</strong></label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="number" class="col-sm-3 control-label text-muted">数量：</label>
                                        <div class="col-sm-9">
                                            <div class="col-sm-3" style="padding: 0">
                                                <input type="number" value="1" name="number" class="form-control" id="number" min="1" max="10000">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-offset-2 col-sm-2">
                                            <button type="button" class="btn btn-primary go_buy">购买</button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    </tbody>
                </table>
           </div>
            <div class="bs-example bs-example-tabs">
                <ul id="myTab" class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#description" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">商品详细</a></li>
                    <li role="presentation"><a href="#comment" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">评论</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                      <div role="tabpanel" class="tab-pane fade in active" id="description" aria-labelledby="home-tab">
                        {{item.description|safe}}
                      </div>
                      <div role="tabpanel" class="tab-pane fade" id="comment" aria-labelledby="profile-tab">
                          {% if comments %}
                            <table>
                                <tr>
                                    <th>用户名</th>
                                    <th>评论内容</th>
                                    <th>评分</th>
                                </tr>
                                {% for comment in comments %}
                                <tr>
                                    <td>{{comment.user.name}}</td>
                                    <td>{{comment.content}}</td>
                                    <td>{{comment.rank}}</td>
                                </tr>
                                {% endfor %}
                            </table>
                          {% else %}
                          <h2 class="text-center text-info">暂无评论</h2>
                          {% endif %}
                      </div>
                </div>
            </div>
        </div>
        <!--right-->
    </div>
</div>
<script type="text/javascript">
    $(".go_buy").click(function(){
        var item_id=$("#item_id").data('id');
        var item_num=$("#number").val()
        $.ajax({
            type:'post',
            url:'{{request.route_url('buy')}}',
            data:{item_id:item_id,item_num:item_num},
            dataType:'jsonp',
            success:function(data)
            {
                if(data.status==1)
                {
                    alert('购买成功');
                    window.location.href='{{request.route_url('shoping_cart')}}'
                }
                else if(data.status==0)
                {
                    alert('请先登录');
                    window.location.href='{{request.route_url('login')}}'
                }
                else
                {
                    alert('失败')
                }
            }
        })
    });
</script>
{% endblock %}